﻿html {
    overflow: hidden;
    margin: 0;
    direction: ltr;
}

body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}


.wrapper {
    margin-top: 25vh;
    position: relative;
    z-index: 3;
    max-width: 800px;
    height: 100%;
}

    .wrapper .btn-back {
        background: url('../img/menu_back.png') left top no-repeat;
        background-size: auto 200%;
        display: block;
        margin: 12.5vh auto 0 auto;
        height: 10vh;
        opacity: 0.7;
    }

        .wrapper .btn-back:hover {
            background-position: left bottom;
            opacity: 0.9;
        }

.bg-trailer, .bg-circle, .bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
}

.bg-trailer {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

    .bg-trailer img {
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        width: auto;
        will-change: auto;
        pointer-events: none;
    }

    .bg-trailer.active img {
        -moz-animation: rtl 120s linear infinite;
        -o-animation: rtl 120s linear infinite;
        -webkit-animation: rtl 120s linear infinite;
        animation: rtl 120s linear infinite;
    }

.bg-gradient {
    width: 100%;
    height: 100%;
    background: url('../img/pv_gradient.png') repeat-y;
    background-size: contain;
}

.bg-circle {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .bg-circle img {
        height: 200vh;
        margin-top: -50vh;
        margin-left: 10%;
        pointer-events: none;
    }

    .bg-circle.active img {
        -moz-animation: clockwise 40s linear infinite;
        -o-animation: clockwise 40s linear infinite;
        -webkit-animation: clockwise 40s linear infinite;
        animation: clockwise 40s linear infinite;
    }

    .bg-trailer.blur img, .bg-circle.blur img {
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

.main-wrapper {
    opacity: 0.8;
    height: 40vh;
}

    .main-wrapper > div {
        height: 100%;
        float: left;
    }

    .main-wrapper > .video {
        position: relative;
        bottom: 0;
        width: 54%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        height: 100%;
    }

        .main-wrapper > .video div {
            max-height: 100%;
        }

            .main-wrapper > .video div > img {
                cursor: pointer;
                max-height: 100%;
                max-width: 100%;
            }

    .main-wrapper > .d-logo {
        padding-right: 6%;
        text-align: right;
        width: 16%;
    }

        .main-wrapper > .d-logo img, .main-wrapper > .d-trailer img {
            max-height: 100%;
            max-width: 100%;
        }

    .main-wrapper > .d-trailer {
        padding-left: 6%;
        text-align: left;
        width: 16%;
    }

    .main-wrapper .d-top, .main-wrapper .d-bottom {
        display: block;
        margin: 0 auto;
        height: 2vh;
    }

    .main-wrapper .d-top {
        margin-top: -8vh;
        margin-bottom: 6vh;
    }

    .main-wrapper .d-bottom {
        margin-top: 6vh;
    }

.popup-layout {
    height: 100%;
    width: 100%;
}

    .popup-layout .btn-close {
        right: -12px;
        top: -12px;
    }

#v-trailer {
    position: relative;
    max-width: 720px;
    max-height: 600px;
    margin: 0 auto;
    width: 94%;
    height: 94%;
}

    #v-trailer embed {
        border: 6px solid #fff;
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }


/*Animation*/
@keyframes rtl {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -81.6%;
    }
}

@-moz-keyframes rtl {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -81.6%;
    }
}

@-webkit-keyframes rtl {
    from {
        margin-left: 0;
    }

    to {
        margin-left: -81.6%;
    }
}

@keyframes clockwise {
    from {
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-moz-keyframes clockwise {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes clockwise {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(-360deg);
    }
}
